import { getBirthUserList } from "@/api/UserAxios"
import HeaderSearch from "@/components/HeaderSearch"
import MemberHeader from "@/components/MemberHeader"
import MemberList from '@/components/MemberList'
import { useEffect, useState } from "react"
import { DayList, getActiveList } from "./DayList"
import { useNavigate } from "react-router"
import { useDispatch } from "react-redux"
import { setMembers } from "@/store/GiftSlice"

function MemberCare() {
    const [birthUserList, setBirthUserList] = useState([])
    const [activeList, setActiveList] = useState<Record<string, string | number | boolean>[]>([])
    const [activeIndex, setActiveIndex] = useState(0)
    const [search, setSearch] = useState('')
    const navigate = useNavigate()
    const dispatch = useDispatch()

    useEffect(() => {
        getBirthUserList(String(search))
            .then(res => {
                setBirthUserList(res.data.sort((a, b) => {
                    return new Date(['2000', ...a.birthday.split('-').slice(1)].join('-')).getTime()
                        - new Date(['2000', ...b.birthday.split('-').slice(1)].join('-')).getTime()
                }).map(item => {
                    return { ...item, selected: false }
                }))
            })
    }, [search])

    useEffect(() => {
        setActiveList(birthUserList.filter(item => {
            return getActiveList(activeIndex, item)
        }))
    }, [activeIndex, birthUserList])

    return (
        <>
            <div className="overflow-hidden h-[100%] flex flex-col bg-[#FFF]">
                <MemberHeader
                    title="会员生日关怀"
                    titleClass='ml-[222.9px] text-[30px] '
                    navigater="/home"
                />
                <HeaderSearch setSearch={setSearch} />
                <div
                    className="h-[61.9px] w-[100%] overflow-x-auto flex"
                    style={{ border: "1px solid #E4E4E4" }}
                >
                    <div className="
                    px-[42px] 
                    text-[28px] 
                    pt-[7px]
                    flex
                    gap-x-[90.5px]
                    shrink-0
                    flex-nowrap
                    ">
                        {DayList.map((item, index) => <span
                            key={index}
                            style={{
                                color: index === activeIndex ? '#3688FF' : '#333333'
                            }}
                            onClick={() => {
                                setActiveIndex(index)
                            }}
                        >{item}</span>)}
                    </div>
                </div>
                <MemberList data={activeList} birth={true} selecte={(index, value) => {
                    console.log(activeList)
                    return setActiveList(prev => {
                        prev[index].selected = value
                        const obj = [...prev]
                        return obj
                    })
                }} />
                <div className="fixed bottom-[0] h-[98px] bg-[#FAFAFA] w-[100%] flex">
                    <div className="
                    w-[500px] 
                    h-[100%]
                    pl-[31px]
                    pt-[31px]
                    flex"
                        style={{ color: '#000000' }}
                    >
                        <div className="
                        rounded-full 
                        w-[36px] 
                        h-[36px] 
                        bg-[#FFF]"
                            style={{ border: "1px solid #999" }}
                        ></div>
                        <p
                            className="
                            text-[28px]
                            h-[35px]
                            leading-[35px]
                            ml-[25px]"
                            style={{ color: '#000000' }}
                        >
                            已选({activeList.length}人)
                        </p>
                    </div>
                    <div
                        className="
                        w-[250px] 
                        h-[100%] 
                        bg-[#3689F5] 
                        pt-[23px] 
                        text-[36px]
                        text-center"
                        style={{
                            color: "#FFF"
                        }}
                        onClick={() => {
                            dispatch(setMembers(activeList.filter(item => {
                                return item.selected
                            }).map(item => {
                                return item.id
                            })))
                            navigate('/gift')
                        }}
                    >
                        送礼
                    </div>
                </div>
            </div>
        </>
    )
}
export default MemberCare